<template>
	<view class="login d_f f_d_c a_i_c">
		<view class="header d_f j_c_s_b a_i_c">
			<image src="../../static/ct_0031_返回键.png" mode="" class="back" @tap="back"></image>
			<image src="../../static/ct_0033_logo小.png" mode="" class="small_logo"></image>

		</view>
		<view class="create">Create your account</view>
		<view class="color ">Please note that phone verification </view>
		<view class="color">is required for sigup. </view>
		<view class="color">Your number will only be used to -</view>
		<view class="color">verify your identity for security purposes.</view>
		<view class="title">Email address</view>
		<view class="input">
			<u-input v-model="form.email" :border="false" placeholder="" />
		</view>
		<view class="title">Passwrod</view>
		<view class="input">
			<u-input v-model="form.password" :border="false" type="password" placeholder="" />
		</view>
		<view class="title">Invitation code</view>
		<view class="input">
			<u-input v-model="form.invitecode" :border="false" placeholder="" />
		</view>
		<view class="log">Already have an account? Log in</view>
		<view class="must m_t_10">you password must contain</view>
		<view class="must">At least 8 characters</view>
		<view class="button d_f j_c_c a_i_c" @tap="continueUp">Continue</view>

		<u-popup v-model="show" mode="center" border-radius="8">
			<view class="dialog">
				<view>Hello, l am Smith, a technical engineer from OPAlWelcome to participate in OPAl's AlTQ
					testingproject.In order to facilitate Al operation of you!testing, we will provide you with a
					centralizedwallet.Please agree to the agreement below andclick OK to claim it.</view>
				<view class="d_f agree_top">
					<u-checkbox-group>
						<u-checkbox shape="circle" v-model="checked" size="28" active-color="#65ba90"></u-checkbox>
					</u-checkbox-group>
					<view class="d_f agree">
						I have read it carefully and agree
						<view class="size" @tap="protocol">《Agreement》</view>
					</view>
				</view>
				<view class="d_f j_c_c a_i_c btn" @tap="submit">OK</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					email: '',
					password: '',
					invitecode: '',
				},
				checked: false,
			}
		},
		components: {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//提交注册信息
			continueUp() {
				if (!this.form.email) {
					this.tips('Please enter an email address')
					return
				}
				if (!this.form.password) {
					this.tips('Please input a password')
					return
				}

				this.show = true

			},
			submit() {
				if (!this.checked) {
					this.tips('Please read and agree to the user agreement')
					return
				}
				uni.removeStorageSync('data');
				this.$api.userRegister(this.form).then(res => {
					res.data.is_wallet = 1
					uni.setStorageSync('data', res.data)
					uni.redirectTo({
						url: '/pages/index/index'
					})
				})


			},
			//跳转到协议
			protocol() {
				uni.navigateTo({
					url: '/pages/index/agreeOn?type=4&name=agreeOn'
				})
			},
			tips(title) {
				uni.showToast({
					title: title,
					icon: 'none',
					duration: 3000
				});
			},
			//返回首页
			Later() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			//钱包注册
			takeUp() {
				uni.navigateTo({
					url: '/pages/index/registerWallet'
				});
			}
		},
		onShow() {

		},
		onLoad(options) {

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.login {
		width: 100%;
		height: 100%;
		background-image: url('../../static/ct_0011_背景.png');
		background-size: 100% 100%;

		.header {
			width: calc(100% - 64rpx);
			height: 160rpx;
			margin-left: 32rpx;

			.small_logo {
				width: 133rpx;
				height: 42rpx;
			}

			.back {
				width: 20rpx;
				height: 32rpx;
				transform: rotate(180deg);
			}
		}

		.color {
			color: #81c1a1;
			font-size: 20rpx;
			margin-top: 10rpx;
			width: 686rpx;
		}

		.create {
			margin-top: 50rpx;
			width: 686rpx;
			color: #fff;
			font-weight: 700;
			font-size: 40rpx;
		}

		.title {
			color: #fff;
			font-size: 28rpx;
			margin-top: 32rpx;
			width: 600rpx;
		}

		.input {
			width: 686rpx;
			border-radius: 40rpx;
			border: 1rpx solid rgb(65, 103, 103);
			height: 80rpx;
			margin-top: 32rpx;
			padding: 0rpx 32rpx;

			/deep/.u-input--border {
				border: none !important;
			}

			/deep/.uni-input-input {
				color: #fff !important;
			}
		}

		.button {
			width: 640rpx;
			border-radius: 40rpx;
			background: #fff;
			color: #3c9469;
			height: 100rpx;
			margin-top: 40rpx;
			font-weight: 700;
		}

		.log {
			margin-top: 64rpx;
			color: #fff;
			font-weight: 700;
			font-size: 36rpx;
		}

		.must {
			color: #81c1a1;
			font-size: 20rpx;
		}

		.tips {
			margin-top: 32rpx;
			color: #fff;
			font-weight: 700;

			.sign {
				color: #00ffcc;
				margin-left: 10rpx;
			}
		}

		.dialog {
			width: 622rpx;
			padding: 20rpx 64rpx;

			.top {
				margin-top: 32rpx;
			}

			.size {
				font-size: 24rpx;
			}

			.takeUp {
				width: 200rpx;
				height: 100rpx;
				background: rgb(101, 186, 144);
				color: #fff;
				font-weight: 700;
				border-radius: 20rpx;
				margin-top: 32rpx;
			}
		}

		.agree_top {
			margin-top: 32rpx;

			.agree {
				font-size: 24rpx;

				.size {
					color: rgb(101, 186, 144);
				}
			}
		}

		.dialog {
			width: 700rpx;
			background: #fff;
			padding: 32rpx;
			border-radius: 8px;
		}

		.btn {
			width: 100%;
			border-radius: 20rpx;
			background: rgb(101, 186, 144);
			color: #FFFFFF;
			height: 80rpx;
			margin-top: 32rpx;
		}
	}
</style>